<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>ECharts图表</legend>
</fieldset>   
<div style="padding: 20px; background-color: #F2F2F2;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md6" >
      <div class="layui-card" style="height: 460px">
        <div class="layui-card-header">柱状图</div>
        <div class="layui-card-body">
        	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
			<div id="main" style="width: 600px;height:400px;"></div>
        </div>
      </div>
    </div>
    <div class="layui-col-md6" >
      <div class="layui-card" style="height: 460px">
        <div class="layui-card-header">饼状图</div>
        <div class="layui-card-body" style="top:20px">
        	<div id="main_2" style="width: 600px;height:400px;"></div>
        </div>
      </div>
    </div>
  </div>
</div> 

<script>
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init($("#main")[0]);
	var myChart_2 = echarts.init($("#main_2")[0]);
	// 指定图表的配置项和数据
	var option = {
	    title: {
	        text: 'ECharts 入门示例'
	    },
	    tooltip: {},
	    legend: {
	        data:['销量']
	    },
	    xAxis: {
	        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
	    },
	    yAxis: {},
	    series: [{
	        name: '销量',
	        type: 'bar',
	        data: [5, 20, 36, 10, 10, 20]
	    }]
	};

	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	
	option_2 = {
		    title : {
		        text: '某站点用户访问来源',
		        subtext: '纯属虚构',
		        x:'center'
		    },
		    tooltip : {
		        trigger: 'item',
		        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    },
		    legend: {
		        orient: 'vertical',
		        left: 'left',
		        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
		    },
		    series : [
		        {
		            name: '访问来源',
		            type: 'pie',
		            radius : '55%',
		            center: ['50%', '60%'],
		            data:[
		                {value:335, name:'直接访问'},
		                {value:310, name:'邮件营销'},
		                {value:234, name:'联盟广告'},
		                {value:135, name:'视频广告'},
		                {value:1548, name:'搜索引擎'}
		            ],
		            itemStyle: {
		                emphasis: {
		                    shadowBlur: 10,
		                    shadowOffsetX: 0,
		                    shadowColor: 'rgba(0, 0, 0, 0.5)'
		                }
		            }
		        }
		    ]
		};
	myChart_2.setOption(option_2);
</script>